<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <div style="margin:30px 10px 0px 10px;">
      <Card>
        <div slot="title">
          <Button type="primary" size="large" @click="downLoad" style="margin-left:20px">点击下载报表</Button>
        </div>
        <div>
          <i-table :columns="columns" :data="monitorStatusData"></i-table>
          <Spin size="large" fix v-if="spinShow"></Spin>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState,mapGetters } from "vuex";


export default {
  data() {
    return {
      columns: [
        {
          title: "channel",
          key: "channel"
        },
        {
          title: "ip",
          key: "ip"
        },
        {
          title: "摄像头位置",
          key: "location"
        },
        {
          title: "状态",
          key: "online"
        }
      ],
      spinShow:true
    };
  },
  watch:{
    monitorStatusData(val){
      if(val){
        this.spinShow = false
      }
    }
  },
  methods: {
    ...mapActions(["getMonitorStatus"]),
    downLoad() {
      this.exportExcel();
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        const tHeader = ["channel", "ip", "摄像头位置", "状态"];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ["channel", "ip", "location", "online"];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.monitorStatusData; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.dayWeekMonthStartEndTime.todayRealTime + "摄像头状态报表");
      });
    }
  },
  computed: {
    ...mapState(["monitorStatusData"]),
    ...mapGetters(["dayWeekMonthStartEndTime"])
  },
  mounted() {
    this.getMonitorStatus();
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.ivu-table th {
  font-size: 20px;
}
.ivu-table td {
  font-size: 16px;
}
</style>